<template>
  <el-dialog :visible.sync="modelValue" width="30%" :title="'换版本'" append-to-body :modal-append-to-body="false"
    :close-on-click-modal="false" top="5vh" @close="close">
    <div class="dialog-content">
      <div class="dialog-content-body">
        <div class="mr5">
          <template v-if="listData && listData.length > 0">
            <div :class="['list-cell', 'flex_between', currInfo.id == item.id ? 'active' : '']"
              v-for="(item, index) in listData" :key="index" @click="chooseHandle(item)">
              <div class="flex1">
                <h3 class="font_black2">{{ item.title || '--' }}</h3>
                <p class="ellipsis2 mt5" :title="item.txt_s || ''">{{ item.txt_s || '--' }}</p>
              </div>
              <div>
                <div class="font_red" style="width: 240px;text-align: right;">
                  <span class="font_size18">限时优惠价：</span>
                  <span class="font_size18">￥{{ item.price || 0 }}</span>
                </div>
                <div style="width: 240px;text-align: right;">
                  <span class="font_size18">原价：</span>
                  <span class="font_black6 font_size18">￥{{ item.price0 || 0 }}</span>
                </div>
              </div>
              <img v-if="currInfo.id == item.id" class="selete_img" src="static/icon/select.svg" alt="">
            </div>
          </template>
          <empty v-else-if="listData && listData.length == 0" />
          <div class="flex_center" v-if="listData && listData.length > 0">
            <div class="mt10 mb20"> 暂无更多数据~ </div>
          </div>
        </div>
      </div>
      <div class="flex_center dialog-content-footer">
        <el-button @click="close" size="small" style="width: 150px;"> 取消 </el-button>
        <el-button type="primary" @click="creatWxQrcode" size="small" style="width: 150px;"> 微信支付 </el-button>
      </div>
    </div>
    <el-dialog :visible.sync="modeQRlValue" width="20%" :title="'付款二维码'" append-to-body
      :modal-append-to-body="false" :close-on-click-modal="false" top="15vh" @close="closeQr">
      <view class="item-qr-box flex_center_column" id="qrBox" v-if="wxPayCodeurl">
        <ayQrcode ref="qrcode" qrcode_id="qrcode2" :modal="modal_qr" :url="wxPayCodeurl" :height="wh"
          :width="wh" @hideQrcode="hideQrcode" themeColor="#000" />
        <h3 class="mt20 mb20"> 请用微信扫码完成支付 </h3>
      </view>
      <div class="flex_center dialog-content-footer">
        <el-button @click="closeQr" size="small" style="width: 150px;"> 取消 </el-button>
        <el-button type="primary" @click="compPayHandle" size="small" style="width: 150px;"> 我已支付，重新登录
        </el-button>
      </div>
    </el-dialog>

  </el-dialog>
</template>

<script>
import config from "@/js/conf/Config.js"
import https from "@/js/https/Https.js";
import localStore from "@/js/LocalStore.js";
import ayQrcode from "@/components/comm/ay-qrcode/ay-qrcode.vue";
import tabBarConntrl from "@/js/TabBarContrl.js";

export default {
  name: 'changeVersionDialog',
  components: {
    ayQrcode,
  },
  data() {
    return {
      modelValue: false,
      modeQRlValue: false,
      loading: false,
      currInfo: {},
      query: {
        pfrom: 0,
        pnum: 20,
        ch: 1
      },
      wxPayCodeurl: "",
      wh: 200,
      modal_qr: false,
      listData: []
    }
  },
  mounted() {
    // Vue 2 生命周期钩子
  },
  beforeDestroy() {
    // Vue 2 生命周期钩子
  },
  destroyed() {
    // Vue 2 生命周期钩子
  },
  methods: {
    // 提交创建订单
    async creatWxQrcode() {
      if (!this.currInfo.id) {
        this.$message.error('请选择版本');
        return
      }
      try {
        let param = {
          ch: 1,
          cpid: this.qyInfo.id,
          gd_ls: [{ gdid: this.currInfo.id, number: "1" }],
        }
        this.loading = true
        let res = await this.$api({ url: config.sysbuy_order_add, data: param });
        if (res.status == 1) {
          this.creatQrcode(res.data);
        }
        this.loading = false
      } catch (error) {
        this.loading = false
      }
    },

    /***微信支付二维码数据*****/
    async creatQrcode(data) {
      let param = {};
      param.timeline = Math.floor(new Date().getTime() / 1000); //当前时间戳，校验sign过期需要
      param.paytype = 'wxntv';
      param.objtype = '04';
      param.objid = data.odid;
      param.money_pay = this.currInfo.price;
      param.cpid = this.qyInfo.id;
      https.wxPayQrcode(param, this._handleQrcodeResponse);
    },

    _handleQrcodeResponse(data) {
      if (!data) return;
      if (data.status == 1) {
        if (!data.data) return;
        data = data.data;
        this.wxPayCodeurl = data.pay_param.code_url;
        this.modeQRlValue = true
        this.showQrcode()
      }
    },

    showQrcode() {
      this.modal_qr = true;
      uni.showLoading(
        {
          title: "加载中...",
          mask: true
        });
      setTimeout(() => {
        uni.hideLoading();
        this.$refs.qrcode.crtQrCode();
      }, 500);
    },

    // 完成支付
    compPayHandle() {
      tabBarConntrl.close();
      // this.modeQRlValue = false
      // this.wxPayCodeurl = ''
      // this.currInfo = {}
      // this.modelValue = false
    },

    async getDevsetList() {
      try {
        let param = {
          ...this.query,
        }
        this.loading = true
        let res = await this.$api({ url: config.sysbuy_goods_list, data: param });
        if (res.status == 1) {
          let list = res?.data?.ls || []
          if (list && list.length > 0) {
            this.listData = this.listData.concat(list || [])
          }
        }
        this.loading = false
      } catch (error) {
        this.loading = false
      }
    },

    chooseHandle(item) {
      this.currInfo = item
    },

    open(prams) {
      this.wxPayCodeurl = ''
      this.listData = []
      this.currInfo = {}
      this.modelValue = true
      this.$nextTick(() => {
        this.getDevsetList()
        this.qyInfo = prams
      })
    },

    close() {
      this.modelValue = false
      this.wxPayCodeurl = ''
    },

    closeQr() {
      this.modeQRlValue = false
      this.wxPayCodeurl = ''
    },

    hideQrcode() {
      // 处理隐藏二维码事件
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-content {
  display: flex;
  flex-direction: column;
  height: 550px;

  &-header {
    margin-bottom: 10px;
  }

  &-body {
    flex: 1 1 auto;
    overflow: auto;
  }

  &-footer {
    margin: 14px 0 0 0;
  }
}

.list-cell {
  border-radius: 8px;
  padding: 10px;
  background-color: #f5f7fa;
  margin-bottom: 10px;
  border: 1px solid #f5f7fa;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease-in-out;

  .selete_img {
    position: absolute;
    top: 0;
    right: 0;
    height: 20px;
    width: 20px;
  }
}

.list-cell:hover {
  background-color: rgba(108, 159, 241, 0.2);
}

.active {
  background-color: rgba(108, 159, 241, 0.2);
}
</style>